<template>
  <view class="submit-price" :data-theme="theme">
    <view class="he-item flex justify-between align-center">
      <text>商品总额</text>
      <text>¥{{ goodsAmount | floatPrice }}</text>
    </view>
    <view class="he-item flex justify-between align-center">
      <text>运费{{ freightAmount === 0 ? "(包邮免运费)" : "" }}</text>
      <text>¥{{ freightAmount | floatPrice }}</text>
    </view>
    <view
      class="he-item flex justify-between align-center"
      @click="isCoupon = true"
    >
      <text>优惠券</text>
      <view class="flex align-center">
        <text class="he-item-empty" v-if="possible === 0">暂无可用优惠券</text>
        <template v-else>
          <text class="he-coupon-num" v-if="$h.test.isEmpty(couponReduced)"
            >{{ possible }}张可用</text
          >
          <text v-else class="he-coupon-price"
            >-¥{{ couponReduced | floatPrice }}</text
          >
        </template>
        <text class="iconfont iconbtn_arrow"></text>
      </view>
    </view>
    <submit-coupon
      v-model="isCoupon"
      :coupon="coupon"
      :user-coupon-id="userCouponId"
      @apply="apply"
    ></submit-coupon>
  </view>
</template>

<script>
import submitCoupon from "./submit-coupon.vue";
export default {
  name: "submit-price",
  data() {
    return {
      isCoupon: false,
      coupon: [],
      possible: 0,
    };
  },
  components: {
    submitCoupon,
  },
  props: {
    goodsAmount: {
      type: Number,
    },
    freightAmount: {
      type: Number,
    },
    goodsData: {
      type: Array,
    },
    couponReduced: {
      type: [Number, String],
    },
    userCouponId: {
      type: Number,
    },
  },
  methods: {
    apply: function (user_coupon_id) {
      this.$emit("apply", user_coupon_id);
    },
    getCoupon: function () {
      let _this = this;
      return new Promise(function (resolve, reject) {
        let _array = _this.goodsData.map(function (item) {
          return item.goods_id;
        });
        _this.$heshop
          .coupon("get", {
            behavior: "user",
            goods_id: _array,
            type: "all",
          })
          .then(function (response) {
            let list = response;
            list.forEach(function (item) {
              item.radio = false;
              if (Number(item.coupon.min_price) > _this.goodsAmount) {
                item.isAvailable = 0;
              } else {
                item.isAvailable = 1;
              }
            });
            list = list.sort(function (a, b) {
              return b.isAvailable - a.isAvailable;
            });
            _this.possible = list.filter(
              (item) => item.isAvailable === 1
            ).length;
            _this.coupon = list;
            resolve();
          })
          .catch(function (error) {
            _this.$toError(error);
            reject();
          });
      });
    },
  },
  mounted() {
    this.getCoupon();
  },
  filters: {},
};
</script>

<style scoped lang="scss">
.iconfont.iconbtn_arrow {
  font-size: 22px;
  color: #bebebe;
  margin-left: 14px;
}
.submit-price {
  width: 710px;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 24px;
  margin: 16px 20px 0 20px;
}
.he-item {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
  height: 64px;
}
.he-item-empty {
  color: #999999;
}
.he-coupon-price {
  @include font_color("font_color");
}
.he-coupon-num {
  display: inline-block;
  @include font_color("font_color");
  border: 2px solid transparent;
  @include border_color("border_color");
  border-radius: 4px;
  padding: 5px 5px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  // height: 32px;
  line-height: 1;
}
</style>